<template>
    <view class="page">
        <view class="page-fixed-top">
            <view class="fixed-item" :class="{'active':TabId==0}" @click="onClickNavitem(0)">
                <view class="title">全部</view>
                <view class="line"></view>
            </view>
            <view class="fixed-item" :class="{'active':TabId==1}" @click="onClickNavitem(1)">
                <view class="title">受理中</view>
                <view class="line"></view>
            </view>
            <view class="fixed-item" :class="{'active':TabId==2}" @click="onClickNavitem(2)">
                <view class="title">已完成</view>
                <view class="line"></view>
            </view>
            <view class="fixed-item" :class="{'active':TabId==3}" @click="onClickNavitem(3)">
                <view class="title">已评价</view>
                <view class="line"></view>
            </view>
        </view>
        <view class="page-item" v-for="(item, index) in needsList " :key="index" @click="skipNeedsDetail(item.id)">
            <view class="page-item-head">
                <text>{{item.title}}</text>
<!--                <view class="btn">编辑</view>-->
            </view>
            <view class="page-item-list">
                <view class="user-item" v-for="(items, indexs) in item.buff" :key="indexs">
                    <view class="user-item-left">
                        <img :src="items.user_info.photo_url" />
                        <img class="icon" :src="File_Url+'vip-icon.png'" v-if="items.user_info.is_vip==1" />
                    </view>
                    <view class="user-item-center">
                        {{items.user_info.nickname}}
                    </view>
                    <view class="user-item-right">
                        {{items.join_time}}
                    </view>
                </view>
                <view class="null" v-if="item.buff.length==0">
                    正在处理中！
                </view>
            </view>
            <view class="page-item-foot">
                <view class="foot-status">
                    {{item.status_name}}
                </view>
                <view class="foot-tip">
                    <view class="foot-tip-item">
                        <img :src="File_Url+'eyes-icon.png'" />
                        <text>{{item.browse_num}}</text>
                    </view>
                    <view class="foot-tip-item">
                        <img :src="File_Url+'collect-active.png'" v-if="item.is_collection==1"/>
                        <img :src="File_Url+'collect.png'" v-else/>
                        <text>{{item.attention_num}}</text>
                    </view>
                </view>
            </view>
        </view>
        <view class="null">
            <text v-if="needsList.length>0">没有更多了哦～</text>
            <text v-if="needsList.length==0">没有获取到相应数据哦～</text>
        </view>
    </view>
</template>

<script>
    export default {
        name: "releaseNeeds",
        data(){
            return{
                File_Url: this.$api.FILE_URL,
                TabId: 0,
                page: 1,
                needsList: []
            }
        },
        onShow(){
           this.getMyDemandInfo();
        },
        methods:{
            //获取我发布的需求
            async getMyDemandInfo(){
                let params = {
                    user_token: uni.getStorageSync('userToken'),
                    page: this.page,
                    limit: 10
                }
                params.status = this.TabId;
                const res = await this.$api.getMyDemandInfo(params);
                if (res.data.level == 'success'){
                    this.needsList = res.data.data
                }
            },
            //跳转需求详情页面
            skipNeedsDetail(id){
                uni.navigateTo({
                    url:'/pages/details/needsDetail/needsDetail?needsId='+id+'&from=person'
                })
            },
            onClickNavitem(id){
                this.TabId = id;
                this.getMyDemandInfo();
            }
        }
    }
</script>

<style scoped lang="scss">
    @import '~@/static/scss/mixin.scss';
    .page{
        background: #F8F8F8;
        min-height: calc(100vh - 128rpx);
        padding: 108rpx 20rpx 20rpx 20rpx;
    }
    .list-bottom{
        padding: 23rpx 0;
        @include flex();
        flex-direction: column;
        text{
            height: 40rpx;
            line-height: 40rpx;
            font-size: 28rpx;
            color: #B5B5B5;
        }
    }
    .page-fixed-top{
        position: fixed;
        top: 0;
        left: 0;
        @include flex(flex-start);
        flex-direction: row;
        background: #FFFFFF;
        width: 100vw;
        .fixed-item{
            width: 33%;
            height: 88rpx;
            @include flex();
            flex-direction: column;
            .title{
                height: 48rpx;
                line-height: 48rpx;
                font-size: 34rpx;
            }
        }
        .fixed-item.active{
            .title{
                height: 80rpx;
                line-height: 80rpx;
                color: #3782FF;
                font-weight: bold;
                font-size: 40rpx;
            }
            .line{
                width: 40rpx;
                height: 8rpx;
                background: #3782FF;
                border-radius: 4rpx;
            }
        }
    }
    .page-item{
        background: #FFFFFF;
        border-radius: 10rpx;
        margin-bottom: 20rpx;
        .page-item-head{
            border-bottom: 1rpx solid #E5E5E5;
            padding: 19rpx 30rpx;
            @include flex(flex-start);
            flex-direction: row;
            text{
                line-height: 60rpx;
                height: 60rpx;
                font-size: 32rpx;
            }
            .btn{
                margin-left: auto;
                height: 60rpx;
                border: 2rpx solid #6FA5FF;
                padding: 0 22rpx;
                color: #3782FF;
                line-height: 60rpx;
                font-size: 28rpx;
                border-radius: 8rpx;
            }
        }
        .page-item-list{
            border-bottom: 1rpx solid #E5E5E5;
            .user-null{
                padding: 60rpx 100rpx;
                font-size: 32rpx;
                color: #666666;
                line-height: 45rpx;
                text-align: center;
            }
            .user-item{
                padding: 20rpx 30rpx;
                @include flex(flex-start);
                flex-direction: row;
                .user-item-left{
                    width: 80rpx;
                    height: 80rpx;
                    position: relative;
                    img{
                        width: 100%;
                        height: 100%;
                        border-radius: 360rpx;
                    }
                    .icon{
                        position: absolute;
                        right: 0rpx;
                        width: 30rpx;
                        height: 30rpx;
                        bottom: 0;
                    }
                }
                .user-item-center{
                    padding: 0 30rpx;
                    height: 45rpx;
                    line-height: 45rpx;
                    font-size: 32rpx;
                    font-weight: bold;
                }
                .user-item-right{
                    margin-left: auto;
                    height: 40rpx;
                    line-height: 40rpx;
                    font-size: 28rpx;
                    color: #999999;
                }
            }

        }
        .page-item-foot{
            padding: 20rpx 30rpx;
            @include flex(flex-start);
            flex-direction: row;
            .foot-status{
                height: 40rpx;
                line-height: 40rpx;
                color: #3782FF;
                font-size: 28rpx;
            }
            .foot-tip{
                margin-left: auto;
                @include flex(flex-start);
                flex-direction: row;
                .foot-tip-item{
                    @include flex(flex-start);
                    flex-direction: row;
                    margin-left: 20rpx;
                    img{
                        width: 40rpx;
                        height: 40rpx;
                        margin-right: 10rpx;
                    }
                    text{
                        line-height: 40rpx;
                        height: 40rpx;
                        color: #666666;
                        font-size: 28rpx;
                    }
                }
            }
        }
    }
</style>
